import React, { useState } from 'react'

export default function LayOut() {
    const [count, setCount] = useState(0)
    const [str, setStr] = useState("放假了")
    const [obj, setObj] = useState({username: "bao"})
    const [arr, setArr] = useState([1, 2, 3, 4])
    function add () {
        setCount((p) => ++p )
    }

    function reverseStr() {
        setStr(str.split("").reverse().join("")) 
    }
    function changeObj() {
        let newObj = JSON.parse(JSON.stringify(obj))
        newObj.username = "包包"
        setObj(newObj)
    }
    function changeArr() {
        let newArr = JSON.parse(JSON.stringify(arr))
        newArr[0] = 100
        setArr(newArr)
    }

  return (
    <div>
        <button onClick={add}>+1</button>
        <div>{count}</div>
        <hr/>
        <button onClick={reverseStr}> str 反向</button>
        <p>{str}</p>
        <hr />
        <button onClick={changeObj}> 修改 Obj </button>
        <div>{obj.username}</div>
        <hr />
        <button onClick={changeArr}>修改 数组 arr</button>
        <p>{arr[0]}</p>
    </div>
  )
}
